<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>数据可视化</title>
    <link rel="stylesheet"  href="/xianwangCss/temp.css" />
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <script type="text/javascript" src="../../../js/jquery.js"></script>
    <script type="text/javascript" src="../../../js/china.js"></script>
    <script type="text/javascript" src="../../../js/flexible.js"></script>
</head>
<body style="font-size: 24px;">
<!-- 头部的盒子 -->
<header>
    <h1>数据展示</h1>
    <div class="showTime"></div>
    <script>
        var t = null;
        t = setTimeout(time, 1000); //開始运行
        function time() {
            clearTimeout(t); //清除定时器
            dt = new Date();
            var y = dt.getFullYear();
            var mt = dt.getMonth() + 1;
            var day = dt.getDate();
            var h = dt.getHours(); //获取时
            var m = dt.getMinutes(); //获取分
            var s = dt.getSeconds(); //获取秒
            document.querySelector(".showTime").innerHTML =
                "当前时间：" +
                y +
                "年" +
                mt +
                "月" +
                day +
                "日-" +
                h +
                "时" +
                m +
                "分" +
                s +
                "秒";
            t = setTimeout(time, 1000); //设定定时器，循环运行
        }
    </script>
    &
</header>

<!-- 页面主体部分 -->
<section class="mainbox">
    <div class="column">
        <div class="panel flow2">
            <h2>各月日均客流量增速</h2>
            <div class="chart"></div>
            <div class="panel-footer"></div>
        </div>
    </div>
</section>
<script>
    // flow2
    (function() {
        var myChart = echarts.init(document.querySelector(".flow2 .chart"));
        var option = {
            tooltip: {
                trigger: "axis"
            },
            legend: {
                top: "0%",
                data: ["邮件营销", "联盟广告", "视频广告", "直接访问", "搜索引擎"],
                textStyle: {
                    color: "rgba(255,255,255,.5)",
                    fontSize: "12"
                }
            },

            grid: {
                left: "10",
                top: "30",
                right: "10",
                bottom: "10",
                containLabel: true
            },
            xAxis: [
                {
                    type: "category",
                    boundaryGap: false,
                    // x轴更换数据
                    data: [
                        "2018年2月",
                        "2018年3月",
                        "2018年4月",
                        "2018年5月",
                        "2018年6月",
                        "2018年7月",
                        "均值",
                    ],
                    // 文本颜色为rgba(255,255,255,.6)  文字大小为 12
                    axisLabel: {
                        textStyle: {
                            color: "rgba(255,255,255,.6)",
                            fontSize: 12
                        }
                    },
                    // x轴线的颜色为   rgba(255,255,255,.2)
                    axisLine: {
                        lineStyle: {
                            color: "rgba(255,255,255,.2)"
                        }
                    }
                }
            ],
            yAxis: [
                {
                    type: "value",
                    axisTick: { show: false },
                    axisLine: {
                        lineStyle: {
                            color: "rgba(255,255,255,.1)"
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: "rgba(255,255,255,.6)",
                            fontSize: 12
                        }
                    },
                    // 修改分割线的颜色
                    splitLine: {
                        lineStyle: {
                            color: "rgba(255,255,255,.1)"
                        }
                    }
                }
            ],
            series: [
                {
                    name: "各月日均客流量增速",
                    type: "line",
                    smooth: true,
                    // 单独修改当前线条的样式
                    lineStyle: {
                        color: "#0184d5",
                        width: "2"
                    },
                    // 填充颜色设置
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [
                                {
                                    offset: 0,
                                    color: "rgba(1, 132, 213, 0.4)" // 渐变色的起始颜色
                                },
                                {
                                    offset: 0.8,
                                    color: "rgba(1, 132, 213, 0.1)" // 渐变线的结束颜色
                                }
                            ],
                            false
                        ),
                        shadowColor: "rgba(0, 0, 0, 0.1)"
                    },
                    // 设置拐点
                    symbol: "circle",
                    // 拐点大小
                    symbolSize: 8,
                    // 开始不显示拐点， 鼠标经过显示
                    showSymbol: false,
                    // 设置拐点颜色以及边框
                    itemStyle: {
                        color: "#0184d5",
                        borderColor: "rgba(221, 220, 107, .1)",
                        borderWidth: 12
                    },
                    data: [
                        -14.7,
                        19.65,
                        0.76,
                        -3.61,
                        2.56,
                        19.52,
                        4.03,
                    ]
                },
            ]
        };
        myChart.setOption(option);
        // 4. 让图表跟随屏幕自动的去适应
        window.addEventListener("resize", function() {
            myChart.resize();
        });
    })();
</script>
</body>
</html>
